// 字体单位转换函数
@function px2rem($px) {
  @return $px / $baseFontSize * 1rem;
}

// 文字多行显示超出隐藏
@mixin multi-line-ellipsis($lineLimit:2, $lineHeight: 1.2, $fixedHeight: false) {
  line-height: $lineHeight;

  @if ($fixedHeight) {
    height: $lineLimit * $lineHeight * 1.2em;
  }

  @else {
    max-height: $lineLimit * $lineHeight * 1.2em;
  }

  display: -webkit-box;
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  -webkit-line-clamp: $lineLimit;
  -webkit-box-orient: vertical;
}

// 文字单行显示超出隐藏
@mixin single-line-ellipsis($width:100%, $display:block, $line-height:1.2) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: $width;
  display: $display;
  line-height: $line-height;
}

// flex布局
@mixin flex-box {
  display: flex;

  >* {
    display: block; //这玩意是因为早期的flexbox实现要求容器内的项目必须是display:block，android 4.3就是这样。
  }
}

/* 圆形盒子 */
@mixin circle($size: 11px, $bg: #fff) {
  border-radius: 50%;
  width: $size;
  height: $size;
  line-height: $size;
  text-align: center;
  background: $bg;
}

// 正方形盒子
@mixin square-box($width: 100%) {
  position: relative;
  width: $width;
  height: 0;
  overflow: hidden;
  margin: 0;
  padding-bottom: $width;
}


// 图片居中
@mixin image-container {
  @include flex-box;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: bottom;
  }
}

// position居中
@mixin position-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// flex居中
@mixin flex-center($direction:row, $justify:center, $align:center, $flex-wrap: null) {
  @include flex-box;

  @if ($direction !=null) {
    flex-direction: $direction;
  }

  @if ($justify !=null) {
    justify-content: $justify;
  }

  @if ($align !=null) {
    align-items: $align;
  }

  @if ($flex-wrap !=null) {
    flex-wrap: $flex-wrap;
  }
}


// 伪元素
@mixin PseudoElement {
  position: absolute;
  display: block;
  content: "";
}

/* 三角形 */
@mixin triangle($width:10px, $direction:top, $color:#000) {
  border: $width solid transparent;

  @if ($direction==top) {
    // 上三角
    border-bottom-color: $color;
  }

  @if ($direction==bottom) {
    // 下三角
    border-top-color: $color;
  }

  @if ($direction==left) {
    // 左三角
    border-right-color: $color;
  }

  @if ($direction==right) {
    // 右三角
    border-left-color: $color;
  }
}

// 排版
@mixin textFormat {
  text-align: justify;
  text-justify: ideographic;
  word-break: break-all;
}

// 渐变
@mixin linear-gradient($direction, $from:#fff, $to:#fff) {
  background-color: $to;
  background: -webkit-linear-gradient($direction, $from, $to);
}